
import {useEffect,useRef,useState} from "react"
import "./index.scss"

export default function BadGetaway(){
    const bgstar = useRef();
    const [spanNum,setSpanNum] = useState([]);

    const ranFun=(min,max)=>{
        return Math.floor(Math.random()*(max-min+1)+min);
    }

    const starInit=()=>{
        var screenW=document.getElementById('bgstar').offsetWidth;
        var screenH=bgstar.current.offsetHeight;

         for (var i = 0; i < 550; i++) { 
            //位置随机
            var x = Math.floor(Math.random() * screenW);
            var y = Math.floor(Math.random() * screenH);
            //大小随机
            var scaler = Math.random() * 1.5;
            //频率随机
            var rate = Math.random() * 2.5;
            var r = ranFun(10, 250);
            var g = ranFun(10, 250);
            var b = ranFun(10, 250);
            spanNum.push({
                x: x + "px",
                y: y + "px",
                scaler: scaler,
                rate: rate + "s",
                rgb: `rgb(${r},${g},${b})`
            });
            setSpanNum([...spanNum])
        }
    }

    useEffect(()=>{
        starInit()
    },[])

    
    return (
        
        <div className="errorpage" ref={bgstar} id="bgstar">
                <img className="errorimg" src={require("../../assets/images/503.png").default} alt="" />
                {
                    spanNum.map((item,i)=>(
                        <span className="span-dots" key={i} style={{top:item.y,left:item.x,transform:'scale('+item.scaler+')',animationDelay:item.rate,backgroundColor:item.rgb}}></span>
                    ))
                }
        </div>
    )
}